<template>
    <ul>
        <li v-for="(item, index) in list" :key="item.id" :class="{ active: item.isCompleted }">
            <input type="checkbox" v-model="item.isCompleted">
            {{ item.todo }}
            <button @click="handleDel(index)">删除</button>
        </li>
    </ul>

    <button @click="filter('all')">全部:{{ allCom }}</button>
    <button @click="filter('completed')">已完成:{{ ywcCom }}</button>
    <button @click="filter('active')">未完成:{{ wwcCom }}</button>
</template>
<script setup>
import { ref, defineProps, toRefs, defineEmits, computed } from "vue"
let props = defineProps(['list','allCom','wwcCom','ywcCom'])
let { list,allCom,wwcCom,ywcCom } = toRefs(props)
let emit = defineEmits(['del','getFlag'])
let handleDel = (index) => {
    emit('del', index)
}




//点击 全部、未完成、已完成按钮 触发的过滤列表函数
let filter = (flag)=>{
    //将接收到的值通过emit 子传父 给父组件
    //getFlag是事件类型名称，需要在defineEmits定义
    emit('getFlag',flag)
}
</script>